<style>
	#popup-title{
		color:#fff !important;
	}
	.ol-popup{
		background-color:#1441c1 !important;
		color:#fff;
	}
	#popup-closer{
		color:#fff !important;
	}
	.ol-popup:after{
		border-top-color:#1441c1 !important;
	}
	#popup-content ul li{
		line-height: 25px;
	}
	#map_tips li{
		line-height: 26px;
		font-size: 16px;
		border-bottom: 1px dashed #cccccc45;
	}

	.pdata-menu{
		overflow: auto;
	}
	.pdata-menu:not([__null__])::-webkit-scrollbar {
		background: #041252;
		width: 0px;
		height: 0px;
	}

	.pdata-menu:not([__null__])::-webkit-scrollbar-button {
		display: none;
	}
	.pdata-menu:not([__null__])::-webkit-scrollbar-thumb{
		background: #093d9c;
	}
</style>
<script type="text/javascript" src="/map/openlayer/build/ol.js"></script>
<link rel="stylesheet" href="/map/openlayer/css/ol.css">
<link rel="stylesheet" href="/module/base/toolp.css">
<div class="pdata-map" id="map"></div>
<div id="map_tips" style="display:none;position: absolute;width: 350px;height: 630px;top: 90px;right: 10px;background: rgb(6 11 53 / 83%)">
	<div id="popup-title" style="font:bold 15px sans-serif;align:left;position: absolute;top: 5px;left: 8px;color: #000000">Sample details</div>
	<a href="javascript:;" onclick="$('#map_tips').fadeOut(500)" id="popup-closer" class="ol-popup-closer" style="color:#8e908c;"></a>
	<div id="map_tips_content" style="color: #ccc;margin: 30px 10px 10px 10px;border-top: 1px solid #ccc;padding-top: 10px;height: 650px;overflow: hidden;overflow-y: auto"></div>
</div>
<!--<div id="popup" class="ol-popup">
<div class="pophead" style="width:100%;height: 20px;">
       &lt;!&ndash; 弹出框标题 &ndash;&gt;
       <div id="popup-title" style="font:bold 15px sans-serif;align:left;position: absolute;top: 5px;left: 8px;color: #000000">Sample details</div>
       &lt;!&ndash;弹出框右上角关闭效果 &ndash;&gt;
       <a href="#" id="popup-closer" class="ol-popup-closer" style="color:#8e908c;"></a>
   </div>
   &lt;!&ndash; 弹出框内容 &ndash;&gt;
   <div id="popup-content" style="padding: 10px"></div>
</div>-->
<ul class="pdata-tabs">
	<li class="pdata-tabs-cur">PM</li>
	<li>Source</li>
</ul>

<ul class="pdata-menu">
	<!--<li>C</li>
	<li>N</li>
	<li>O</li>
	<li>Si</li>
	<li>S</li>
	<li>Fe</li>
	<li>Cu</li>
	<li>Zn</li>
	<li>Sr</li>
	<li>Nd</li>
	<li>Pb</li>-->
</ul>

<footer id="message">Number of all element PM data: 0</footer>
<script>

	$(function(){
		//请求元素列表
		data.getAllEls();
		//创建地图
		data.createMap();
		//标点图层
		Pointlayer = new ol.layer.Vector({
			source: new ol.source.Vector({wrapX:false})
		})
		// 添加图层
		map.addLayer(Pointlayer);

		//创建弹出框容器
		overlayToolp = new ol.Overlay({
			//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
			autoPan: true,
			autoPanAnimation: {
				duration: 250
				//当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
			}
		});

		//这个位置将所有查询到的样本数据调用下面的for循环即可
		//var details =[{"PNo":1,"createTime":"2023-01-07 16:02:03.285","position":"116.433,39.9","detail":[{"name":"d15N","value":"0.312312"},{"name":"d18O","value":"0.312312"},{"name":"d12C","value":"0.312312"},{"name":"d14C","value":"0.312312"},{"name":"d13C","value":"0.312312"}],"id":"8ec492bbc0844fa1beb49b5864355f8e","type":3},{"PNo":1,"createTime":"2023-01-07 16:15:52.097","position":"116.533,40.0","detail":[{"name":"d15N","value":"0.312312"},{"name":"d18O","value":"0.312312"},{"name":"d12C","value":"0.312312"},{"name":"d14C","value":"0.312312"},{"name":"d13C","value":"0.312312"}],"id":"1aebecf3195e4229b7dd1b23bae2a13a","type":3}]
//	for(var i = 0;i<details.length;i++){
//		pos = details[i].position;
//		//这个位置显示所有样本数据
//		data.addLable(pos.split(",")[0],pos.split(",")[1],details[i])
//	}
		//鼠标移入时鼠标指针变为小手
		map.on("pointermove", function (evt) {
			var pixel = map.getEventPixel(evt.originalEvent);
			var hit = map.hasFeatureAtPixel(pixel);
			map.getViewport().style.cursor = hit ? 'pointer' : '';
		});
		//点击显式点详细数据
		map.on('click', function (evt) {
			var flag = false;
			var coordinate = evt.coordinate;
			map.forEachFeatureAtPixel(evt.pixel,(feature) => {
				flag = true;
				//点击到对象
				var attr = feature.getProperties();
//			pos = attr.properties.position
//			detail = attr.properties.detail
				tips = "<ul>"
//			for(var i = 0;i<detail.length;i++){
//				tips+= '<li>'+detail[i].name+': ' + detail[i].value +'</li>'
//			}
				tips+= '<li>Element: ' + attr.properties.EleType +'</li>'
				tips+= '<li>IsotopeType: ' + getIFont(attr.properties.IsotopeType) +'</li>'
				if(dataType == 'PM'){
					tips+= '<li>PMType: ' + attr.properties.PMType +'</li>'
				}else{
					tips+= '<li>SOURCEType: ' + attr.properties.SourceType +'</li>'
				}
				tips+= '<li>Content: ' + attr.properties.Content +'</li>'
				tips+= '<li>Isotopic Composition: ' + attr.properties.Ic +'</li>'
				tips+= '<li>Isotopic Composition SD: ' + attr.properties.icsd +'</li>'
				tips+= '<li>n: ' + getIntVal(attr.properties.n) +'</li>'
				if(dataType == 'PM'){
					tips+= '<li>Concentration: ' + attr.properties.mc +'</li>'
					tips+= '<li>Concentration SD: ' + attr.properties.mcsd +'</li>'
				}
				tips+= '<li>SamplingDate: ' + attr.properties.SamplingDate +'</li>'
				tips+= '<li>Year: ' + getIntVal(attr.properties.Year) +'</li>'
				tips+= '<li>Season: ' + attr.properties.Season +'</li>'
				tips+= '<li>SamplingSite: ' + attr.properties.SamplingSite +'</li>'
				tips+= '<li>Nation: ' + attr.properties.Nation +'</li>'
				tips+= '<li>Region: ' + attr.properties.Region +'</li>'
				tips+= '<li>Longitude: ' + attr.properties.Longitude +'</li>'
				tips+= '<li>Latitude: ' + attr.properties.Latitude +'</li>'
				tips+= '<li>Laboratory: ' + attr.properties.Laboratory +'</li>'
				tips+= '<li>Reference: ' + attr.properties.Reference +'</li>'
				if(dataType == 'SOURCE'){
					tips+= '<li>Note: ' + attr.properties.Note +'</li>'
				}
				tips += "</ul>"
				document.getElementById("map_tips_content").innerHTML = tips;
				$("#map_tips").fadeIn(500);
			},{hitTolerance: 20});
		});
		//数据类型切换
		$(".pdata-tabs li").each(function(n,m){
			$(m).click(function(){
				//样式
				$(".pdata-tabs li").attr("class","");
				$(m).attr("class","pdata-tabs-cur");
				if(n == '0'){dataType = "PM"}
				if(n == '1'){dataType = "SOURCE"}
				//隐藏tips
				$("#map_tips").fadeOut(500);
				//地图操作
				data.getAllEls();
				//data.getData(dataType,dataCategory);
				data.getCacheBypeCat(dataType,dataCategory);
			})
		});
		//数据详细类型切换
		$(".pdata-menu li").each(function(n,m){
			$(m).click(function(){
				//修改样式
				if($(m).hasClass("pdata-menu-cur")){
					$(m).attr("class","");
					dataCategory = "all";
				}else{
					$(".pdata-menu li").attr("class","");
					$(m).attr("class","pdata-menu-cur");
					dataCategory = $(m).text();
				}
				//隐藏tips
				$("#map_tips").fadeOut(500);
				//data.getData(dataType,dataCategory);
				data.getCacheBypeCat(dataType,dataCategory);
			})
		})

		//默认请求数据
		//data.getData(dataType,dataCategory);
		data.getCacheBypeCat(dataType,dataCategory);
		//跳转数据上传页
		$("#toUpload").click(function(){
			$(".n-nav-links a").eq(5).click();
		});
	});
</script>